<template>
    <el-dialog class="dialogTotal" :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
        :close-on-press-escape="false" @close="cancel">
        <el-form :disabled="isdisabled" class="formTotal" ref="userDetailFrom" :model="addform" label-width="90px"
            label-position="right" :rules="userRules">
            <el-form-item label="职业" prop="occupation">
                <el-radio-group v-model="addform.occupation">
                    <el-radio label="0">主持人</el-radio>
                    <el-radio label="1">督导</el-radio>
                </el-radio-group>
            </el-form-item>
            <div class="titleL2">人员信息</div>
            <el-form-item label="姓名" prop="user_name">
                <el-input v-model="addform.user_name" class="formWidth"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-radio v-model="addform.sex" label="0">男</el-radio>
                <el-radio v-model="addform.sex" label="1">女</el-radio>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="addform.phone" class="formWidth"></el-input>
            </el-form-item>
            <el-form-item label="微信号" prop="wx_num">
                <el-input v-model="addform.wx_num" class="formWidth"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="id_num">
                <el-input v-model="addform.id_num" class="formWidth"></el-input>
            </el-form-item>
            <el-form-item label="银行卡号" prop="bank_num">
                <el-input v-model="addform.bank_num" class="formWidth"></el-input>
            </el-form-item>
            <el-form-item label="登录密码" prop="password">
                <el-input v-model="addform.password" class="formWidth"></el-input>
                <div v-if="title == '编辑人员'" style="color: #F56C6C; font-size: 12px;">密码不支持查看，如需修改请重新填写</div>
            </el-form-item>
            <div class="titleL2">职业信息</div>
            <el-form-item label="艺名" prop="stage_name">
                <el-input v-model="addform.stage_name" class="formWidth"></el-input>
            </el-form-item>
            <el-form-item label="市场价" prop="market_price">
                <el-input v-model="addform.market_price" class="formWidth"></el-input>
            </el-form-item>
            <el-form-item label="合作价" prop="collaboration_price">
                <el-input v-model="addform.collaboration_price" class="formWidth"></el-input>
            </el-form-item>
            <el-form-item label="是否内部成员" prop="is_internal">
                <el-radio v-model="addform.is_internal" label="0">是</el-radio>
                <el-radio v-model="addform.is_internal" label="1">否</el-radio>
            </el-form-item>
            <el-form-item label="兼职/全职" prop="occupation_type">
                <el-radio v-model="addform.occupation_type" label="0">全职</el-radio>
                <el-radio v-model="addform.occupation_type" label="1">兼职</el-radio>
            </el-form-item>
            <el-form-item label="年度单量指标" prop="year_indicator">
                <el-input v-model="addform.year_indicator" class="formWidth"></el-input>
            </el-form-item>
            <el-form-item label="个人简介" prop="introduction">
                <el-input v-model="addform.introduction" class="formWidth" type="textarea" :autosize="{ minRows: 3 }"
                    maxlength="50" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="形象照" prop="portrait_photo">
                <el-upload v-if="imgFileList.length == 0" :action="fileUrl" :on-success="sucessImg" :on-error="errorImg"
                    accept=".png,.jpg,.jpeg" :limit="1" :http-request="uploadHttp" :file-list="imgFileList"
                    :show-file-list="false" :before-upload="beforeImg">
                    <div class="uploadDiv">
                        <i class="el-icon-plus"></i>
                    </div>
                </el-upload>
                <div class="imgDiv" v-else>
                    <img class="imgList" :src="imgFileList[0].url" alt="">
                    <div class="zhediv">
                        <i class="el-icon-view" @click="preImg(imgFileList[0].url)"></i>
                        <i class="el-icon-delete" @click="deleteImg('xx')" v-if="!isdisabled"></i>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="报价单" prop="quotation">
                <el-upload v-if="bjFileList.length == 0" :before-upload="beforeImg" :action="fileUrl"
                    :show-file-list="false" :http-request="uploadHttp" :on-success="sucessImage" :on-error="errorImage"
                    accept=".png,.jpg,.jpeg" :limit="1" :file-list="bjFileList">
                    <div class="uploadDiv">
                        <i class="el-icon-plus"></i>
                    </div>
                </el-upload>
                <div class="imgDiv" v-else>
                    <img class="imgList" :src="bjFileList[0].url" alt="">
                    <div class="zhediv">
                        <i class="el-icon-view" @click="preImg(bjFileList[0].url)"></i>
                        <i class="el-icon-delete" v-if="!isdisabled" @click="deleteImg('bj')"></i>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="视频" prop="video">
                <el-upload v-if="videoFileList.length == 0" :before-upload="beforeVideo" :action="fileUrl"
                    :show-file-list="false" :on-success="sucessVideo" :on-error="errorVideo" accept=".mp4" :limit="1"
                    :file-list="videoFileList">
                    <div class="uploadDiv">
                        <i class="el-icon-plus"></i>
                    </div>
                </el-upload>
                <div class="videoDiv" v-else>
                    <video class="videoList" :src="videoFileList[0].url" controls></video>
                    <i class="el-icon-close" v-if="!isdisabled" @click="deleteImg('video')"></i>
                </div>
            </el-form-item>
            <el-form-item label="排序" prop="sort_order" class="orderDiv">
                <el-input v-model="addform.sort_order" style="width: 150px;" type="number" :min="0"></el-input>
                <div style="color: #F56C6C;font-size: 13px;line-height:30px;">*注意：数字越大排名越靠前</div>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="saveUsser" :disabled="isdisabled">确 定</el-button>
        </div>
        <preview ref="preview"></preview>
    </el-dialog>
</template>
<script>
import preview from './preview.vue';
import util from '../../utils/request';
import rulesPattern from '@/utils/rules';
export default {
    components: { preview },
    computed: {
        fileUrl() {
            return util.defaults.baseURL + 'api/uploadFile'

        }

    },
    data() {
        return {
            title: '新增人员',
            dialogFormVisible: false,
            addform: {
                occupation: '0',
                user_name: '',
                phone: '',
                wx_num: '',
                id_num: '',
                bank_num: '',
                stage_name: '',
                market_price: '',
                collaboration_price: '',
                year_indicator: '',
                introduction: '',
                portrait_photo: '',
                quotation: '',
                video: '',
                password: '',
                sex: '0',
                is_internal: '0',
                occupation_type: '0',
                sort_order: 0
            },
            imgFileList: [],
            bjFileList: [],
            videoFileList: [],
            userRules: {
                occupation: [{ required: true, message: '请选择职业', trigger: 'blur' }],
                user_name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { pattern: rulesPattern.phone, message: '手机号格式不正确', trigger: 'change' }
                ],
                id_num: [
                    { required: true, message: '请输入身份证号', trigger: 'blur' },
                    { pattern: rulesPattern.card, message: '身份证号格式不对', trigger: 'change' }
                ],
                stage_name: [{ required: true, message: '请输入艺名', trigger: 'blur' }],
                is_internal: [{ required: true, message: '请选择是否工作室成员', trigger: 'blur' }],
                occupation_type: [{ required: true, message: '请选择全职或兼职', trigger: 'blur' }],
                password: [{ required: true, message: '请输入登录密码', trigger: 'blur' }],
                market_price: [{ required: true, message: '请输入市场价', trigger: 'blur' }],
            },
            isdisabled: false
        }
    },
    methods: {
        uploadHttp(options) {
            const formData = new FormData();
            // 注意：这里我们使用Blob对象，以便可以指定文件名
            const file = new Blob([options.file], { type: options.file.type });
            // 对文件名进行UTF-8编码，使用encodeURIComponent处理非ASCII字符
            console.log('options', options.file.name);
            // const fileName = options.file.name
            const fileName = encodeURIComponent(options.file.name);
            formData.append(options.filename, file, fileName);
            const xhr = new XMLHttpRequest();
            xhr.open('POST', options.action, true);
            xhr.onload = function () {
                if (xhr.status >= 200 && xhr.status < 300) {
                    options.onSuccess(xhr.response);
                } else {
                    options.onError(xhr.response);
                }
            };
            xhr.send(formData);
        },
        adduser() {
            this.addform = {
                occupation: '0',
                user_name: '',
                phone: '',
                wx_num: '',
                id_num: '',
                bank_num: '',
                stage_name: '',
                market_price: '',
                collaboration_price: '',
                year_indicator: '',
                introduction: '',
                portrait_photo: '',
                quotation: '',
                video: '',
                password: '',
                sex: '0',
                is_internal: '0',
                occupation_type: '0',
                sort_order: 0
            },
                this.title = '新增人员'
            this.dialogFormVisible = true
        },
        sucessImg(res) {
            let responseObj = typeof res === 'string' ? JSON.parse(res) : res;
            this.$message.success(responseObj.msg)
            this.imgFileList.push({ ...responseObj, url: util.defaults.baseURL + 'files/' + responseObj.filename })
            this.addform.portrait_photo = responseObj.filename

        },
        errorImg(err) {
            this.$message.error('文件上传失败')
        },
        beforeImg(file) {
            const maxSize = 100 * 1024 * 1024;
            if (file.size > maxSize) {
                this.$message.error('文件大小不能超过100MB');
                return false
            }
        },
        beforeVideo(file) {
            const maxSize = 500 * 1024 * 1024;
            if (file.size > maxSize) {
                this.$message.error('文件大小不能超过500MB');
                return false
            }
        },
        sucessImage(res) {
            let responseObj = typeof res === 'string' ? JSON.parse(res) : res;
            this.$message.success(responseObj.msg)
            this.bjFileList.push({ ...responseObj, url: util.defaults.baseURL + 'files/' + responseObj.filename })
            this.addform.quotation = responseObj.filename
        },
        errorImage(err) {
            this.$message.error('文件上传失败')
        },
        sucessVideo(res) {
            let responseObj = typeof res === 'string' ? JSON.parse(res) : res;
            this.$message.success(responseObj.msg)
            this.videoFileList.push({ ...responseObj, url: util.defaults.baseURL + 'files/' + responseObj.filename })
            this.addform.video = responseObj.filename
        },
        errorVideo(err) {
            this.$message.error('文件上传失败')
        },
        preImg(item) {
            this.$refs.preview.innerVisible = true
            this.$refs.preview.preSrc = item
        },
        deleteImg(item) {
            switch (item) {
                case 'xx':
                    this.imgFileList = []
                    break;
                case 'bj':
                    this.bjFileList = []
                    break;
                case 'video':
                    this.videoFileList = []
                    break;
                default:
                    break;
            }

        },
        getUserDetail(ids, val) {
            this.$api.getUserInfo(ids).then(res => {
                this.addform = res.data
                res.data.portrait_photo == '' || res.data.portrait_photo == null ? this.imgFileList = [] : this.imgFileList.push({ url: util.defaults.baseURL + 'files/' + res.data.portrait_photo })
                res.data.quotation == '' || res.data.quotation == null ? this.bjFileList = [] : this.bjFileList.push({ url: util.defaults.baseURL + 'files/' + res.data.quotation })
                res.data.video == '' || res.data.video == null ? this.videoFileList = [] : this.videoFileList.push({ url: util.defaults.baseURL + 'files/' + res.data.video })
                this.dialogFormVisible = true
            }).catch(err => {
                this.$message.error(err.message)
            })
            val == 'isedit' ? this.title = '编辑人员' : this.title = '人员详情'
            val == 'isedit' ? this.isdisabled = false : this.isdisabled = true
        },
        saveUsser() {
            this.$refs.userDetailFrom.validate((vail) => {
                if (vail) {
                    if (this.title == '编辑人员') {
                        this.$api.editUserInfo(this.addform).then(res => {
                            this.$message.success(res.msg)
                            this.cancel()
                            this.$parent.restForm()
                        }).catch(err => {
                            this.$message.error(err.message)
                        })
                    } else {
                        console.log('这是新增');
                        this.$api.addUserInfo(this.addform).then(res => {
                            this.$message.success(res.msg)
                            this.cancel()
                            this.$parent.restForm()
                        }).catch(err => {
                            this.$message.error(err.message)
                        })
                    }


                } else {
                    this.$message.error('请填写完整信息')
                }
            })
        },
        cancel() {
            this.$refs.userDetailFrom.resetFields()
            this.videoFileList = []
            this.imgFileList = []
            this.bjFileList = []
            this.dialogFormVisible = false
            this.isdisabled = false
        }
    },
    mounted() {

    }
}
</script>
<style lang="less" scoped>
.dialogTotal {}

.titleL2 {
    display: flex;
    align-items: center;
    justify-content: left;
    line-height: 20px;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
}

.titleL2::before {
    content: '';
    width: 5px;
    height: 20px;
    margin-right: 5px;
    background-color: #409eff;
}

.formWidth {
    width: 300px;
}

.el-form-item {
    padding-left: 40px !important;
    display: flex;
    align-items: center;
}

/deep/.el-form-item__label {
    line-height: 20px !important;
}

/deep/.el-form-item__content {
    margin-left: 20px !important;
}

.uploadDiv {
    width: 120px;
    height: 120px;
    border: 1px dashed #C0C4CC;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;

    i {
        font-size: 25px;
        color: #909399;
    }
}

.uploadDiv:hover {
    border-color: #409eff;

    i {
        color: #409eff;
    }
}

.imgDiv {
    position: relative;
    width: 150px;
    height: 150px;

    .imgList {
        width: 100%;
        height: 100%;
        border-radius: 8px;
        object-fit: fill;
    }

    .zhediv {
        display: none;
    }

}

.imgDiv:hover {
    .zhediv {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 150px;
        height: 150px;
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;

        i {
            font-size: 20px;
            color: #fff;
            cursor: pointer;
        }

        .el-icon-view {
            margin-right: 10px;
        }
    }
}

.videoDiv {
    width: 300px;
    height: 250px;
    position: relative;

    i {
        position: absolute;
        right: -20px;
        top: -10px;
        font-size: 24px;
        font-weight: 500;
        cursor: pointer;
    }

    video {
        width: 100%;
        height: 100%;
    }
}
</style>